<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="700px"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <div class="form">
      <!-- 表单输入元件 ----------------------------------------------------------------------------------------->
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="80px" class="rule-form">
        <el-form-item label="分类名称" prop="typeName">
          <el-input v-model="ruleForm.typeName" />
        </el-form-item>

        <el-form-item label="备注">
          <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="ruleForm.remark"
            maxlength="50"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <!-- ----------------------------------------------------------------------------------------------------->
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleConfirm">提交</el-button>
      <el-button @click="handleClose">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
/** 远程添加，修改，获取单个详性接口，获取selector下拉列表的接口，以及时间转换工具函数等 ------------------------------------------------- */
import { addSort , updateSort , listDetailSort } from '@/api/deviceConsumable/management'
/** 表单参数 ------------------------------------------------------------------------------------------------------------------------ */
const ruleForm = {
  typeName:'',// 分类名称
  remark:''// 备注
}
/** ---------------------------------------------------------------------------------------------------------------------------------- */

export default {
  name: 'Form',
  data() {
    return {
      dialogVisible: false,
      ruleForm: Object.assign({}, ruleForm),
      isUpdateForm: false,
      dialogTitle: '创建对话框',
      /** 表单规则 --------------------------------------------------------------------------------------------------------------------- */
      rules: {
        typeName: [
          { required: true, message: '请输入分类名称', trigger: 'blur' }
        ]
      }
      /** ----------------------------------------------------------------------------------------------------------------------------- */
    }
  },
  computed: {
  },
  methods: {
    // 打开表单对话框
    openDialog(id = null) {
      if (id) {
        listDetailSort(id).then(res => {
          this.isUpdateForm = true
          this.dialogTitle = '修改分类'
          /** 修改时的表单参数赋值 --------------------------------------------------------------------------------------------------------------------- */
          this.ruleForm = res.data
          this.dialogVisible = true
        })
      } else {
        this.isUpdateForm = false
        this.dialogTitle = '新增分类'
        this.dialogVisible = true
      }
    },
    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const data = this.ruleForm
          console.log('提交的表单', data)
          if (this.isUpdateForm) {
            updateSort(data).then(() => {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.resetForm('ruleForm')
              this.dialogVisible = false
              this.$emit('submit_success')
            })
          } else {
            addSort(data).then(() => {
              this.$message({
                message: '创建成功',
                type: 'success'
              })
              this.resetForm('ruleForm')
              this.dialogVisible = false
              this.$emit('submit_success')
            })
          }
        } else {
          // --------consolelog('数据验证不通过，检查输入表单！')
          return false
        }
      })
    },
    // 重置表单
    resetForm(formName) {

        this.ruleForm = Object.assign({}, ruleForm)
        this.$refs[formName].resetFields()
    },
    /** ---------------------------------------------------------------------------------------------------------------------------------------- */
    // 关闭窗口，重置表单
    handleClose() {
      if (this.isUpdateForm) {
        this.$refs['ruleForm'].resetFields()
      } else {
        this.ruleForm = Object.assign({}, ruleForm)
        this.$refs['ruleForm'].resetFields()
      }
      this.dialogVisible = false
    },
    handleConfirm() {
      this.submitForm('ruleForm')
    },
  }
}
</script>
<style lang="scss" scoped>
  .form {
    width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
</style>
